<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<TITLE>HTML5 Rendering Framework</TITLE>
		<SCRIPT type="text/javascript" src="../H5R.js"></SCRIPT>
		<SCRIPT type="text/javascript">
			TS = {
				"box": {
					"brick": {
						img: "brick.jpg",
					},
					"537252458aebcf9423000004": {
						img: "brick.jpg",
					},
				},
				"entity": {
					"walk": {
						img: [
							{
								src: "walk.jpg",
								sprites: 8,
							},
							"",
						],
					},
				},
			};
			
			SG = {
				scale: 2,
				boxes: [
					{
						img: "box.537252458aebcf9423000004",
					},
					{
						img: "box.537252458aebcf9423000004",
						x: 16,
					},
					{
						x: 32,
						scale: 0.5,
						children: [
							{
								img: "box.537252458aebcf9423000004",
							},
							{
								img: "box.537252458aebcf9423000004",
								x: 16,
								height: 8,
							},
						]
					},
				],
				entities: [
					{
						img: "entity.walk",
						animation: 0,
						y: 16,
						fps: 8,
					},
					{
						img: "entity.walk",
						animation: 0,
						y: 16,
						x: 16,
						fps: 4,
					},
					{
						img: "entity.walk",
						animation: 1,
						y: 16,
						x: 32,
					},
				],
			};
		
			R = new H5R();
			R.addStage(new H5R.Stage("stage1"));
			R.addStage(new H5R.Stage("stage2"));
			
			S3 = new H5R.Stage("stage3");
			R.addStage(S3);
			
			R.setScenegraph(SG);
			
			R.setTileset(TS, function(){
				R.getStage("stage2").setScenegraphPart("entities");
				R.getStage("stage3").setScenegraphPart("boxes.2");
			});
		</SCRIPT>
	</HEAD>
	<BODY>
		<DIV id="stage1" style="width: 100px; height: 100px; border: 1px solid #ccc;"></DIV>
		<DIV id="stage2" style="width: 100px; height: 100px; border: 1px solid #ccc;"></DIV>
		<DIV id="stage3" style="width: 100px; height: 100px; border: 1px solid #ccc;"></DIV>
	</BODY>
</HTML>